<template>
  <el-dialog
    :close-on-click-modal="false"
    append-to-body
    :title="title"
    :visible.sync="visible"
    width="1200px">
    <div class="add-form">
      <el-form ref="form" :model="form" label-width="120px" :disabled="type === 'view'">
        <el-form-item label="上级字典"
          :rules="[{ required: type === 'add', message: '请选择上级字典', trigger: 'change' }]"
          prop="parentId">
          <el-input @focus="onSelectParent" readonly v-model="form.parentName" placeholder="上级字典" clearable :disabled="type !== 'add'"></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '请输入字典编号', trigger: 'change' }]"
          label="字典编号"
          prop="code">
          <el-input v-model="form.code" placeholder="请选择上级字典自动填充" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="字典名称" prop="dictValue"
          :rules="[{ required: true, message: '请输入字典名称', trigger: 'change' }]"
        >
          <el-input v-model="form.dictValue" placeholder="字典名称"></el-input>
        </el-form-item>
        <el-form-item label="字典键值" prop="dictKey"
          :rules="[{ required: true, message: '请输入字典键值', trigger: 'change' }]"
        >
          <el-input type="number" v-model="form.dictKey" placeholder="请输入数字" :disabled="type !== 'add' && form.code !== '配送费'"></el-input>
        </el-form-item>
        <el-form-item label="字典排序" prop="sort"
          :rules="[{ required: true, message: '请输入字典排序', trigger: 'change' }]"
        >
          <el-input type="number" v-model="form.sort" placeholder="字典排序"></el-input>
        </el-form-item>
        <el-form-item label="字典备注">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入字典备注"></el-input>
        </el-form-item>

      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submit" v-show="type !== 'view'" :loading="loading">{{loading ? '提交中...' : '提交'}}</el-button>
    </span>

    <dictTreeDialog ref="dictTreeDialog" @nodeClick="onNodeClick"></dictTreeDialog>
  </el-dialog>
</template>

<script>
import { add, update, getDictTree } from '@/api/system/dict'
import dictTreeDialog from './dictTreeDialog'
export default {
  data() {
    return {
      visible: false,
      loading: false,
      type: 'add',
      form: {
        code: '',
        dictValue: '',
        dictKey: '',
        parentId: '',
        parentName: '',
        sort: '0',
        remark: '',
      },
      dictList: []
    }
  },
  methods: {
    show({type, data}) {
      this.type = type
      this.visible = true
      this.getDictTree().then(() => {
        this.setParentNameById()
      })
      if (data) {
        this.form = {
          ...data,
        }
      } else {
        this.clearForm()
      }
    },
    setParentNameById() {
      const item = this.getSelectItem(this.form.parentId, this.dictList)
      if (item) {
        this.form.parentName = item.title
      }
    },
    getDictTree() {
      return getDictTree().then(res => {
        this.dictList = res.data.data ? res.data.data : []
      })
    },
    clearForm() {
      this.form = {
        code: '',
        dictValue: '',
        dictKey: '',
        parentId: '',
        parentName: '',
        sort: '0',
        remark: '',
      }
      this.$refs.form.clearValidate()
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const request = this.type === 'add' ? add : update
          this.loading = true
          request(this.getParams()).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: `提交成功！`
              })
              this.visible = false
              this.$emit('submit')
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg
              })
            }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    getParams() {
      const params = {
        ...this.form,
      }
      if (params.ancestorCode) {
        delete params.ancestorCode
      }
      const selectParent = this.getSelectItem(params.parentId, this.dictList)
      if (selectParent) {
        params.parentName = selectParent.title
      }
      return params
    },
    onSelectParent() {
      this.$refs.dictTreeDialog.show({dictList: this.dictList})
    },
    getSelectItem(id, dataList) {
      let item = null
      for(let i = 0; i < dataList.length; i++) {
        const $0 = dataList[i]
        if ($0.id === id) {
          return $0
        }
        if ($0.children) {
          item = this.getSelectItem(id, $0.children)
        }
        if (item) {
          return item
        }
      }
    },
    onNodeClick(data) {
      console.log(data)
      this.form.parentId = data.id
      this.form.parentName = data.title
      this.form.code = data.title
      this.$refs.dictTreeDialog.hide()
    }
  },
  computed: {
    title() {
      const textMap = {
        'add': '新 增',
        'edit': '编 辑',
        'view': '查 看',
      }
      return textMap[this.type]
    }
  },
  components: {
    dictTreeDialog
  }
}
</script>

<style lang="scss" scoped>
.add-form {

}
</style>
